<template>
    <lay-form>
        <lay-form-item prop="file">
            <lay-upload @done="doneHandle" acceptMine="image/jpg,image/png">
                <template #preview>
                    <div style="margin-left:30px">预览图：</div>
                    <div v-for="item in url">
                        <img :src="item.url">
                    </div>
                </template>
            </lay-upload>
        </lay-form-item>
    </lay-form>

</template>

<script setup>
import { ref, reactive } from 'vue'
import { uploadImageApi } from '@/api/img';
import { layer } from '@layui/layui-vue';
const url = ref([])
const data = ref();
const doneHandle = (file) => {
    console.log("正在执行文件上传...")
    const formData = new FormData()
    formData.append('file', file.data[0])
    console.log(file)
    uploadImageApi(formData).then((res) => {
        if (res && res.code == 200) {
            console.log(res)
            const imgUrl = process.env.BASE_API + res.data;
            console.log(imgUrl);
            url.value.push({ url: imgUrl });
            layer.msg('上传成功', { icon: 1, time: 1000 })
        } else {
            layer.msg('上传失败', { icon: 2, time: 1000 })
        }
    })
};

</script>